<form class="overview-form" (ngSubmit)="loadList(queryParams)" autocomplete="off">
  <mat-form-field>
    <input matInput type="text" placeholder="房间" name="room" [(ngModel)]="queryParams.room">
  </mat-form-field>

  <mat-form-field>
    <input matInput [matDatepicker]="sendDateStart" placeholder="推送开始时间" name="sendDateStart"
      [formControl]="sendDateControl" [(ngModel)]="queryParams.sendDateStart" disabled>
    <mat-datepicker-toggle matSuffix [for]="sendDateStart"></mat-datepicker-toggle>
    <mat-datepicker #sendDateStart disabled="false"></mat-datepicker>
  </mat-form-field>

  <mat-form-field>
    <input matInput [matDatepicker]="sendDateEnd" placeholder="推送结束时间" name="sendDateEnd"
      [formControl]="sendDateControl" [(ngModel)]="queryParams.sendDateEnd" disabled>
    <mat-datepicker-toggle matSuffix [for]="sendDateEnd"></mat-datepicker-toggle>
    <mat-datepicker #sendDateEnd disabled="false"></mat-datepicker>
  </mat-form-field>

  <mat-form-field>
    <mat-select placeholder="是否离线保存" name="leaveMessage" [(ngModel)]="queryParams.leaveMessage">
      <mat-option *ngFor="let item of [{key:'全部',value:''},{key:'是',value:'true'},{key:'否',value:'false'}]"
        [value]="item.value">
        {{item.key}}</mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field>
    <input matInput type="text" placeholder="apnsName" name="apnsName" [(ngModel)]="queryParams.apnsName">
  </mat-form-field>

  <button type="submit" mat-raised-button color="accent">搜索</button>
  <button type="reset" mat-raised-button>重置</button>
</form>
<table class="table">
  <thead>
    <tr>
      <th colspan="8">
        当天总消息数：{{messageStat.currDateMessageCount}}&nbsp;&nbsp;|&nbsp;
        当前小时总消息数：{{messageStat.currHourMessageCount}}&nbsp;&nbsp;|&nbsp;
        当前分钟总消息数：{{messageStat.currMinuteMessageCount}}
      </th>
    </tr>
    <tr>
      <th style="width: 5%;">编号</th>
      <th style="width: 5%;">ID</th>
      <th style="width: 10%;">房间</th>
      <th style="width: 35%;">推送数据</th>
      <th style="width: 15%;">推送时间</th>
      <th style="width: 10%;">离线保存</th>
      <th style="width: 10%;">apnsName</th>
      <th style="width: 10%;">推送到达</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of currentList;let index = index;">
      <td>{{index + 1}}</td>
      <td>{{item.id}}</td>
      <td>{{item.room}}</td>
      <td [title]="item.pushData">
        <div class="ellipsis width-30rem p-r-10" (click)="showMorePushData(item.pushData)">
          {{ item.pushData }}
        </div>
      </td>
      <td>{{item.sendDate|date:'yyyy-MM-dd HH:mm:ss'}}</td>
      <td>{{item.leaveMessage == 'true' ? '是' : '否'}}</td>
      <td>{{item.apnsName ? item.apnsName : '-'}}</td>
      <td
        matTooltip="{{'android终端：' + item.ackAndroidCount + ' IOS终端：' + item.ackIOSCount + ' 当时在线在线终端：' + item.onlineClientCount}}"
        matTooltipPosition="above">{{item.ackCount}}</td>
    </tr>
  </tbody>
</table>

<div class="no-result" *ngIf="!list?.length">
  暂无数据
</div>
<!-- 分页 -->
<mat-paginator *ngIf="list?.length" showFirstLastButtons [length]="list?.length" (page)="loadList(queryParams,$event);"
  [pageSizeOptions]="[10,50,100,200,300,400,500]">
</mat-paginator>
